<template>
  <table class="career-table" v-if="careerTableData.length">
    <thead style="color: #999" v-if="type == 1">
      <th width="36" class="fw400 text-999 f12">排位</th>
      <th align="left" class="fw400 text-999 f12">专业名称</th>
      <th width="70" class="fw400 text-999 f12">专业占比</th>
      <th width="35" class="fw400 text-999 f12">趋势</th>
    </thead>
    <thead style="color: #999" v-if="type == 2">
      <th
        width="36"
        class="fw400 text-999 f12"
        v-for="item in title"
        :key="item"
      >
        {{ item }}
      </th>
    </thead>
    <thead style="color: #999" v-if="type == 3">
      <th align="left" width="80" class="fw400 text-999 f12">企业类型</th>
      <th width="35" class="fw400 text-999 f12">企业数量</th>
      <th width="35" class="fw400 text-999 f12">招聘人数占比</th>
      <th width="35" class="fw400 text-999 f12">趋势</th>
    </thead>
    <thead style="color: #999" v-if="type == 4">
      <th width="36" class="fw400 text-999 f12">排位</th>
      <th align="left" class="fw400 text-999 f12">企业名称</th>
      <th width="70" class="fw400 text-999 f12">招聘人数</th>
      <th width="35" class="fw400 text-999 f12">趋势</th>
    </thead>
    <thead style="color: #999" v-if="type == 5">
      <th width="36" class="fw400 text-999 f12">排位</th>
      <th width="70" class="fw400 text-999 f12">招聘岗位</th>
      <th width="50" class="fw400 text-999 f12">薪资范围</th>
      <th width="35" class="fw400 text-999 f12">招聘企业数</th>
      <th width="35" class="fw400 text-999 f12">招聘人数</th>
    </thead>
    <tbody>
      <!-- :style="type == 1 || type == 5 ? 'cursor: pointer;' : ''" -->
      <tr
        v-for="(item, index) in careerTableData"
        :key="item.majorCode"
        :style="type == 1 || type == 5 ? 'cursor: pointer;' : ''"
        @click="goto(item)"
      >
        <td width="36" align="center" class="text-333 f14" v-if="type != 3">
          {{ item.index + 1 || index + 1 }}
        </td>
        <td width="36" align="center" class="text-333 f14" v-if="type == 5">
          {{ item.postName }}
        </td>
        <td width="36" align="center" class="text-333 f14" v-if="type == 5">
          {{ item.salaryStr }}
        </td>
        <td width="36" align="center" class="text-333 f14" v-if="type == 5">
          {{ item.countOfCompany }}
        </td>
        <td width="36" align="center" class="text-333 f14" v-if="type == 5">
          {{ item.companyHiring }}
        </td>
        <td width="70" class="text-333 company-name f14" v-if="type == 4">
          {{ item.companyName }}
        </td>
        <td width="36" align="center" class="text-333 f14" v-if="type == 4">
          {{ item.companyHiring }}
        </td>
        <td width="36" class="text-333 f14" v-if="type == 3">
          {{ item.companyNature || item.companyName }}
        </td>
        <td class="text-333 f14" v-if="type == 1">
          {{ item.majorName }}({{
            item.eduLevel == 'ben'
              ? '本科'
              : item.eduLevel == 'zhuan'
                ? '专科'
                : item.eduLevel == 'gao_ben'
                  ? '高职本科'
                  : '高职专科'
          }})
        </td>
        <td class="text-333 f14" align="center" v-if="type == 3">
          {{ item.countOfCompany }}
        </td>
        <td class="text-333 f14" align="center" v-if="type == 3">
          {{ item.peopleRatioStr }}
        </td>
        <td class="text-333 f14" align="center" v-if="type == 2">
          {{ item.provinceName }}
        </td>
        <td width="71" align="center" class="text-333 f14" v-if="type == 1">
          {{ item.majorRatioStr }}
        </td>
        <td width="35" align="center" class="text-333 f14" v-if="type == 2">
          {{ item.companyHiring }}
        </td>
        <td
          width="35"
          align="center"
          class="text-333 f14"
          v-if="type == 1 || type == 3 || type == 4"
        >
          <i
            class="iconfont icon-Icon-shangsheng"
            style="color: #e9302d"
            v-show="item.isUp"
          ></i>
          <i
            class="iconfont icon-icon_xiajiang"
            style="color: #3c0"
            v-show="!item.isUp"
          ></i>
        </td>
        <td width="35" align="center" class="text-333 f14" v-if="type == 2">
          {{ item.companyHiringRatioStr }}
        </td>
        <td width="35" align="center" class="text-333 f14" v-if="type == 2">
          {{ item.salaryStr }}
        </td>
      </tr>
    </tbody>
  </table>
  <div v-if="careerTableData.length <= 0" style="text-align: center">
    暂无数据
  </div>
</template>

<script setup>
const emit = defineEmits(['goMajorlibrary', 'goZhiYe']);
const { careerTableData, title, type } = defineProps({
  careerTableData: {
    type: Array,
    default: () => [],
  },
  title: {
    type: Array,
    default: () => [],
  },
  type: {
    type: Number,
    default: 1,
  },
});
const goto = (item) => {
  if (type == 1) {
    emit('goMajorlibrary', item);
  }
  if (type == 5) {
    emit('goZhiYe', item);
  }
};
</script>

<style lang="scss" scoped>
.career-table {
  width: 100%;
  padding: 10px;
  background: #fafafa;
}
.career-table > tbody > tr {
  height: 44px;
  width: 100%;
}
.career-table > thead {
  height: 44px;
  width: 100%;
}
.company-name {
  max-width: 215px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
